import React, {
    Component
} from 'react'
import ListOne from './listOne.js'
import ListTwo from './listTwo.js'
import Sort from './sort.js'

class ProductMobile extends Component {
    constructor(props) {
        super(props);
        this.state = {
            listType: true, //控制列表显示样式，true网格，false列表
            page: 1,
            time: 1,
        }
    };

    changeListType = () => {
        this.setState({
            listType: !this.state.listType
        })
    }

    handleScroll = (e) => {
        if(this.props.listData.length>0){
            let scrollTop = e.srcElement.documentElement.scrollTop || e.srcElement.body.scrollTop
            let clientHeight = e.srcElement.documentElement.clientHeight
            let offsetHeight = e.srcElement.documentElement.offsetHeight
            if(((scrollTop + clientHeight) >= offsetHeight) && this.state.time == 1) {
                this.setState({
                    time: 0
                })
                setTimeout(()=>{
                    this.setState({
                        time: 1
                    })
                },3000)//三秒仿刷
                let page = this.state.page
                page ++ 
                this.setState({
                    page: page
                })
                this.props.changePageSize(page)
            }
        }        
    }

    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll);
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll);
    }

    componentWillReceiveProps(nextProps) {

    }

    render() {
        return (
            <div className='productMobile'>
                {
                    !this.props.showCatelog ? '':
                        <Sort
                        search={this.props.search}
                        data={this.props.data}
                        searchIn={this.props.searchIn}
                        listType={this.state.listType}
                        setOrderBy={this.props.setOrderBy}
                        changeListType={this.changeListType}
                        catalogListData={this.props.catalogListData}
                        categoryId={this.props.categoryId}
                        catalogChange={this.props.catalogChange}
                        />
                }
                <div className='list-contain'>
                    {
                        this.state.listType && this.props.noData?
                            <ListOne 
                            listData={this.props.listData}/>:
                            <ListTwo 
                            listData={this.props.listData}/>
                    }
                    {
                        this.props.noData?
                            ''
                                            :
                            <div className='list-no-data'>
                                <img className="imgEmptyStyle" src='../static/img/Empty.png' />
                                <br/>
                                <span>No Data</span>
                            </div>
                    }
                </div>
			</div>
        )
    }
}

export default ProductMobile